<template>
  <view class="container">
    <!-- 顶部标题 -->
    <view class="header">
      <text class="title">抢购</text>
      <button @click="refreshPage" class="refresh-btn">刷新</button>
    </view>

    <!-- 筛选条件 -->
    <view class="filter-bar">
      <button :class="{ active: sortCondition === 'default' }" @click="changeSort('default')">默认排序</button>
      <button :class="{ active: sortCondition === 'asc' }" @click="changeSort('asc')">价格 ↑</button>
      <button :class="{ active: sortCondition === 'desc' }" @click="changeSort('desc')">价格 ↓</button>
    </view>

    <!-- 商品列表 -->
    <view class="product-list">
      <view
        class="product-item"
        v-for="(product, index) in filteredProducts"
        :key="index"
        @click="onProductClick(product)"
      >
        <image :src="product.image" class="product-image" />
        <view class="product-info">
          <text class="product-name">{{ product.name }}</text>
          <text class="product-price">¥ {{ product.price }}</text>
          <view v-if="product.isSoldOut" class="sold-out">已售罄</view>
        </view>
      </view>
    </view>

    <!-- 分页 -->
    <view class="pagination">
      <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
      <view>
        <text
          v-for="page in totalPages"
          :key="page"
          :class="{ active: page === currentPage }"
          @click="goToPage(page)"
        >
          {{ page }}
        </text>
      </view>
      <button @click="nextPage" :disabled="currentPage === totalPages">下一页</button>
    </view>

    <!-- 倒计时 -->
    <view class="countdown">
      <text>离抢购结束还有 {{ countdown }}</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      products: [], // 所有商品
      filteredProducts: [], // 当前显示的商品
      currentPage: 1, // 当前页码
      totalPages: 5, // 总页数
      sortCondition: 'default', // 当前排序条件
      countdown: '00:14:06', // 倒计时
    };
  },
  created() {
    this.loadProducts();
    this.startCountdown();
  },
  methods: {
    // 加载商品数据
    loadProducts() {
      this.products = [
        { name: 'TF001 印章玉', price: 29093, image: '/static/product1.jpg', isSoldOut: false },
        { name: 'JF001 印章玉A', price: 22761, image: '/static/product2.jpg', isSoldOut: false },
        { name: 'S0426069 团梦', price: 32708, image: '/static/product3.jpg', isSoldOut: true },
        { name: 'FV019 浴火重生', price: 31942, image: '/static/product4.jpg', isSoldOut: true },
        { name: 'AT017 浴兴重生', price: 28215, image: '/static/product5.jpg', isSoldOut: false },
      ];
      this.applySort();
    },

    // 根据排序条件过滤商品
    applySort() {
      let sortedProducts = [...this.products];
      if (this.sortCondition === 'asc') {
        sortedProducts.sort((a, b) => a.price - b.price);
      } else if (this.sortCondition === 'desc') {
        sortedProducts.sort((a, b) => b.price - a.price);
      }
      const start = (this.currentPage - 1) * 5;
      const end = this.currentPage * 5;
      this.filteredProducts = sortedProducts.slice(start, end);
    },

    // 修改排序条件
    changeSort(condition) {
      this.sortCondition = condition;
      this.applySort();
    },

    // 商品点击事件
    onProductClick(product) {
      if (product.isSoldOut) {
        uni.showToast({ title: '商品已售罄', icon: 'none' });
      } else {
        uni.navigateTo({
          url: `/pages/product-detail/product-detail?id=${product.name}`,
        });
      }
    },

    // 分页功能
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.applySort();
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.applySort();
      }
    },
    goToPage(page) {
      this.currentPage = page;
      this.applySort();
    },

    // 刷新页面
    refreshPage() {
      this.loadProducts();
    },

    // 倒计时功能
    startCountdown() {
      let time = 14 * 60 + 6; // 总秒数
      const timer = setInterval(() => {
        const minutes = String(Math.floor(time / 60)).padStart(2, '0');
        const seconds = String(time % 60).padStart(2, '0');
        this.countdown = `00:${minutes}:${seconds}`;
        time--;
        if (time < 0) {
          clearInterval(timer);
          this.updateSoldOutStatus();
        }
      }, 1000);
    },

    // 更新已售罄状态
    updateSoldOutStatus() {
      this.products.forEach((product) => (product.isSoldOut = true));
      this.applySort();
    },
  },
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  padding: 10rpx;
}
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10rpx 20rpx;
  background-color: #3cb371;
  color: white;
}
.title {
  font-size: 36rpx;
}
.refresh-btn {
  background-color: white;
  color: #3cb371;
  padding: 5rpx 10rpx;
  border-radius: 5rpx;
}
.filter-bar {
  display: flex;
  justify-content: space-around;
  margin: 10rpx 0;
}
.filter-bar button {
  border: none;
  background-color: white;
  color: #333;
  padding: 10rpx 20rpx;
  border-radius: 5rpx;
  font-size: 24rpx;
}
.filter-bar .active {
  color: #3cb371;
  font-weight: bold;
}
.product-list {
  display: flex;
  flex-wrap: wrap;
}
.product-item {
  width: 48%;
  margin: 1%;
  background-color: white;
  border: 1rpx solid #ddd;
  border-radius: 5rpx;
  overflow: hidden;
  position: relative;
}
.product-image {
  width: 100%;
  height: 200rpx;
}
.product-info {
  padding: 10rpx;
}
.product-name {
  font-size: 26rpx;
  color: #333;
}
.product-price {
  font-size: 28rpx;
  color: #e63946;
}
.sold-out {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 0, 0, 0.5);
  color: white;
  font-size: 36rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.pagination {
  display: flex;
  justify-content: center;
  margin: 20rpx 0;
}
.pagination button {
  padding: 10rpx 20rpx;
  margin: 0 5rpx;
  background-color: #3cb371;
  color: white;
  border: none;
  border-radius: 5rpx;
}
.pagination text {
  margin: 0 10rpx;
  font-size: 24rpx;
  cursor: pointer;
}
.pagination .active {
  color: #3cb371;
  font-weight: bold;
}
.countdown {
  text-align: center;
  font-size: 28rpx;
  margin: 20rpx 0;
}
</style>
